import Animal from "./Animal.js";
import AnimalV1 from "./AnimalV1.js";
import CanvasMap from "./CanvasMap.js";
import status from './runtime.js';
import { unzipAnimalList } from "./tools.js";

const chart_title=<HTMLDivElement>document.getElementById("chart_title");
const page_welcome=<HTMLDivElement>document.getElementById("page_welcome");
const page_option=<HTMLDivElement>document.getElementById("page_option");
const page_game=<HTMLDivElement>document.getElementById("page_game");
/**
 * 设置图表标题
 */
const setChartTitle=()=>{
    let title=""
    if(status.conifg.showAnimal&&status.conifg.showPower){
        title="生物及能量分布"
    }
    if(!status.conifg.showAnimal&&status.conifg.showPower){
        title="能量分布"
    }
    if(status.conifg.showAnimal&&!status.conifg.showPower){
        title="生物分布"
    }
    if(!status.conifg.showAnimal&&!status.conifg.showPower){
        title="一个空白的画布"
    }
    chart_title.innerText=title;
}

const btn_continue_game=<HTMLButtonElement>document.getElementById("btn_continue_game");
const animalListjson=localStorage.getItem("animalList");
const powerMapJson=localStorage.getItem("powerMap")
let animalList:Animal[]=[];
if(animalListjson){
    animalList=unzipAnimalList(animalListjson);
}
let powerMap:number[][]=powerMapJson?JSON.parse(powerMapJson):[];
if(animalList.length==0){
    animalList.push(new Animal({x:250,y:250}));
}else{
    btn_continue_game.style.display="block";
    animalList=animalList.map(v=>{
        return new Animal(v);
    });
}
const map=new CanvasMap();

btn_continue_game.addEventListener("click",()=>{
    page_game.style.display="block";
    page_welcome.style.display="none";
    map.updatePowerMap(powerMap);
    map.updateAnimals(animalList);
})
const btn_start_game= <HTMLButtonElement>document.getElementById("btn_start_game");
btn_start_game.addEventListener("click",()=>{
    page_game.style.display="block";
    page_welcome.style.display="none";
    map.updatePowerMap();
    map.updateAnimals();
})

const btn_run= <HTMLButtonElement>document.getElementById("btn_run");
btn_run.addEventListener("click",()=>{
    status.conifg.run=!status.conifg.run;
    btn_run.innerText=status.conifg.run?"暂停":"继续";
})

const btn_animal_map=<HTMLButtonElement>document.getElementById("btn_animal_map");
btn_animal_map.addEventListener("click",()=>{
    status.conifg.showAnimal=!status.conifg.showAnimal
    btn_animal_map.style.color=status.conifg.showAnimal?"gold":"#CCF"
    setChartTitle();
});
const btn_power_map=<HTMLButtonElement>document.getElementById("btn_power_map");
btn_power_map.addEventListener("click",()=>{
    status.conifg.showPower=!status.conifg.showPower;
    btn_power_map.style.color=status.conifg.showPower?"gold":"#CCF"
    setChartTitle();
})

let canvas=document.getElementsByTagName("canvas").item(0);

// 数据更新
const life_now=<HTMLSpanElement>document.getElementById("life_now");
const animal_now=<HTMLSpanElement>document.getElementById("animal_now");
const plant_now=<HTMLSpanElement>document.getElementById("plant_now");
const dink_now=<HTMLSpanElement>document.getElementById("dink_now");
const life_disory=<HTMLSpanElement>document.getElementById("life_disory");
const die_prey= <HTMLSpanElement>document.getElementById("die_prey");
const die_hunger=<HTMLSpanElement>document.getElementById("die_hunger");
const gene_stabilize=<HTMLSpanElement>document.getElementById("gene_stabilize");
const now_die=<HTMLSpanElement>document.getElementById("now_die");
const age_want_life=<HTMLSpanElement>document.getElementById("age_want_life");
if(canvas==null){
    throw new Error("你画布呢？");
}else{
    if(window.innerWidth<500){
        canvas.width=window.innerWidth;
        canvas.height=window.innerWidth;
    }else{
        canvas.width=500;
        canvas.height=500;
    }
    
    let ctx=canvas.getContext("2d");
    const run =()=>{
        if(ctx && canvas && status.conifg.run){
            status.times++;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            map.run(ctx);

            // 数据更新
            life_now.innerText=map.animalCount+""
            life_disory.innerText=map.historyAnimalCount+""
            die_prey.innerText=status.die_prey+"";
            die_hunger.innerText=status.die_hunger+"";
            animal_now.innerText=status.animals+"";
            plant_now.innerText=status.plants+"";
            dink_now.innerText=status.dink+"";
            gene_stabilize.innerText=status.stabilize+"";
            now_die.innerText=status.now_die+"";
            age_want_life.innerText=age_want_life?status.age_want_life+"":"无穷";
            // console.log(`当前生命数：${map.animalCount}历史共有生命数：${map.historyAnimalCount}`)

            status.now_die=0;
            status.die_age_total=0;
            let animalStr=map.getAnimalList();
            let mapStr=JSON.stringify(map.getPowerMap())
            try{
                localStorage.setItem("powerMap",mapStr)
            }catch(e){  
                console.error("实时保存失败",e,"地图体积",mapStr.length,"生物体积",animalStr.length)
            }
            try{
                localStorage.setItem("animalList",animalStr);
            }catch(e){  
                console.error("实时保存失败",e,"地图体积",mapStr.length,"生物体积",animalStr.length)
            }
        }
        setTimeout(run,status.conifg.interval)
    }
    run();
}
